<script setup>
import { toRefs, onMounted } from 'vue'
import CancelButton from '@/components/CancelButton.vue'

defineOptions({
  name: 'DialogForm'
})
// 控制弹窗隐藏 显示
const modelValue = defineModel({ type: Boolean })
const props = defineProps({
  id: Number, // 编辑状态 接收的 父组件id数据,用于判断 按钮文字
  loading: Boolean,
  width: { // 弹窗宽度
    type: String,
    default: '680px'
  },
  title: { // 模块标题
    type: String,
    default: '弹窗'
  },
  saveText: { // 保存按钮 文案
    type: String,
    default: '保存'
  },
  saveFlag: Boolean, // 为true: 不关掉'继续添加'
  hideFlag: { //  控制 '继续添加'按钮的展示 隐藏
    type: Boolean,
    default: false
  }
})
const { id, width, title,saveFlag } = toRefs(props)

const emit = defineEmits(['update:saveFlag', 'on-close', 'on-cancel', 'on-save'])

const handleSaveFlag = (val) => {
  emit('update:saveFlag', val)
}
onMounted(() => {

})
</script>

<template>
  <ElDialog
      class="dialog-form"
      align-center
      :title="title"
      :model-value="modelValue"
      :close-on-click-modal="false"
      :before-close="()=>emit('on-close')"
      :style="{width:width}">
    <template #default>
      <slot/>
    </template>
    <template #footer>
      <template v-if="$slots.dialogFooter">
        <slot name="dialogFooter"/>
      </template>
      <template v-else>
        <!--  id&&parentInfo.id 编辑时隐藏,hideFlag手动控制隐藏     -->
        <ElCheckbox v-if="!id&&!hideFlag" :model-value="saveFlag"
                    @change="handleSaveFlag"
        >继续添加
        </ElCheckbox>
        <!--只读时不显示 保存按钮-->
        <SaveButton class="ml-1" :loading="loading" :save-text="saveText" @on-save="emit('on-save')"/>
      </template>
      <CancelButton :btn-text="id?'关闭':'取消'" :loading="loading" @on-cancel="emit('on-cancel')"/>
    </template>
  </ElDialog>
</template>

<style lang="scss">

.dialog-form {
  &.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }

    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>
